<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/plotlist.css">
    <link rel="stylesheet" href="./css/calender.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=29dosuZrFUdGIC1SfyBGWwm01RW6M5Qx"></script>
    <title>小区列表</title>
</head>
<body style="background:#f1f5f8;">
    <div class="box">
        <div class="form_top">
            <form class="form-inline">
                <div class="form-group">
                  <label class="oLabel">小区名称</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label class="oLabel">详细地址</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label class="oLabel">维护人员</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label class="oLabel">省/直辖市</label>
                    <select class="selt">
                        <option value="">上海</option>
                        <option value="">江西</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="oLabel">市</label>
                    <select class="selt">
                        <option value="">上海</option>
                        <option value="">江西</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="oLabel">县/区</label>
                    <select class="selt">
                        <option value="">上海</option>
                        <option value="">江西</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="oLabel">所属商圈</label>
                    <select class="selt">
                        <option value="">上海</option>
                        <option value="">江西</option>
                    </select>
                </div>
                <div class="TwoBtn">
                    <input class="oSeset" type="reset" value="重置">  
                    <input class="oSubmit" type="submit" value="检索">  
                </div>
            </form>
        </div>
        <div class="tableList">
            <div class="controlBtn">
                <div class="oLeft">
                    <input class="oSeset" type="reset" value="批量定时开关">  
                    <input class="oSubmit" type="submit" value="批量音量控制"> 
                </div>
                <div class="oRight">
                    <span>当前列表总数88</span>
                </div>
            </div>
            <!-- 表格 -->
            <table class="table table-bordered">
                <!-- 表头 -->
                <thead>
                    <tr class="warning">
                        <th>
                            <input type="checkbox">
                            <label for="">选择</label>
                        </th>
                        <th>编号</th>
                        <th>小区名称</th>
                        <th>详细地址</th>
                        <th>所属商圈</th>
                        <th>物业公司</th>
                        <th>维护人员</th>
                        <th>开机时间</th>
                        <th>关机时间</th>
                        <th>设备数</th>
                        <th class="caozuo">操作</th>
                    </tr>
                </thead>
                <!-- 表身 -->
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>12243</td>
                        <td>*****</td>
                        <td>******</td>
                        <td>******</td>
                        <td>******</td>
                        <td>******</td>
                        <td>******</td>
                        <td>******</td>
                        <td>******</td>
                        <td>
                            <a href="#"data-toggle="modal" data-target="#myModal_three">查看</a>
                            <a href="#"data-toggle="modal" data-target="#myModal_four">编辑</a>
                            <a href="#"data-toggle="modal" data-target="#myModal">定时开关</a>
                            <a href="#"data-toggle="modal" data-target="#myModal_volume">音量控制</a>
                            <a href="#"data-toggle="modal" data-target="#myModal_five">查看排期</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页-->
        <div value="1 0" style="width:0"></div>
        <div id="page" class="page_div"></div>
    </div>
    <!-- 弹出框1 设置定时开关机 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">设置定时开关机</h4>
            </div>
            <div class="modal-body">
               <div>
                    <label>开关时间</label>
                    <select class="selt" value="请选择">
                        <option value="">请选择</option>
                        <option value="">江西</option>
                    </select>
               </div>
               <div>
                    <label>结束时间</label>
                    <select class="selt" value="请选择">
                        <option value="">请选择</option>
                        <option value="">江西</option>
                    </select>
               </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>
    
    <!-- 弹出框2 设置音量大小 -->
    <div class="modal fade" id="myModal_volume" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">音量控制</h4>
            </div>
            <div class="modal-body">
               <div>
                    <label>播放时间</label>
                    <select class="selt" value="请选择">
                        <option value="">选择时间</option>
                        <option value="">江西</option>
                    </select>
               </div>
                <div>
                    <label>选择时间</label>
                    <select class="selt" value="请选择">
                        <option value="">请选择</option>
                        <option value="">江西</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>

    <!-- 弹出框3 点击查看 -->
    <div class="modal fade bs-example-modal-lg" id="myModal_three" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content w600"style="width:900px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">查看详情</h4>
            </div>
            <div class="modal-body">
                <div style="width:800px;height:25px;margin:0 auto;background: #eee;"></div>
                <div style="width:800px;margin:0 auto;border:1px solid #eee;">
                    <div style="width:720px;margin:0 auto;height:300px">
                        <dt class="dl_2">
                            <font>编号:</font>
                            <span>**********</span>
                        </dt>
                        <dt>
                            <font>小区名称:</font>
                            <span>20天</span>
                        </dt>
                        <dt>
                            <font>详细地址:</font>
                            <span>*****</span>
                        </dt>
                        <dt>
                            <font>所属区域:</font>
                            <span>*****</span>
                        </dt>
                        <dt>
                            <font>物业公司:</font>
                            <span>5s</span>
                        </dt>
                        <dt>
                            <font>维护人员:</font>
                            <span>50s</span>
                        </dt>
                        <dt>
                            <font>设备数:</font>
                            <span>100</span>
                        </dt>
                        <dt>
                            <font>开机时间:</font>
                            <span>100</span>
                        </dt>
                        <dt>
                            <font>关机时间:</font>
                            <span>100</span>
                        </dt>
                        <dt>
                            <font>坐标:</font>
                            <span>*****</span>
                        </dt>
                    </div>
                </div>
                <!-- 小区宣传语 -->
                <div class="oTitle" style="margin-top:8px;">
                    <label for="">小区宣传语</label>
                    <textarea name="" id="" cols="80" rows="10"></textarea>
                </div>
                <!-- 地图展示 -->
                <div id="allmap"></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"data-toggle="modal" data-target="#myModal_six">查看设备列表</button>
            </div>
            </div>
        </div>
    </div>

    <!-- 弹出框4 编辑 -->
    <div class="modal fade bs-example-modal-lg" id="myModal_four" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content w600">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline">
                        <div class="">
                            <div class="form-group">
                                    <label for="exampleInputEmail2">省/直辖市</label>
                                    <select>
                                        <option value="">上海</option>
                                        <option value="">江西</option>
                                    </select>
                            </div>
                            <div class="form-group">
                            <label for="exampleInputEmail2">市</label>
                            <select>
                                <option value="">上海</option>
                                <option value="">江西</option>
                            </select>
                            </div>
                            <div class="form-group">
                            <label for="exampleInputEmail2">县/区</label>
                            <select>
                                <option value="">上海</option>
                                <option value="">江西</option>
                            </select>
                            </div>
                            <div class="form-group">
                            <label for="exampleInputEmail2">所属商圈</label>
                            <select>
                                <option value="">上海</option>
                                <option value="">江西</option>
                            </select>
                            </div>
                        </div>
                    </form>
                    <form class="form-horizontal height200">
                        <div>
                            <label for="inputEmail3" class="col-sm-2 control-label">物业公司</label>
                            <div class="col-sm-10">
                            <input class="form-control mt5">
                            </div>
                        </div>
                        <div>
                            <label for="inputPassword3" class="col-sm-2 control-label">小区名称</label>
                            <div class="col-sm-10">
                            <input  class="form-control mt5">
                            </div>
                        </div>
                        <div>
                            <label for="inputEmail3" class="col-sm-2 control-label">维护人员</label>
                            <div class="col-sm-10">
                            <input class="form-control mt5">
                            </div>
                        </div>
                        <div>
                            <label for="inputPassword3" class="col-sm-2 control-label">纬度</label>
                            <div class="col-sm-10">
                            <input  class="form-control mt5">
                            </div>
                        </div>
                        <div>
                            <label for="inputEmail3" class="col-sm-2 control-label">经度</label>
                            <div class="col-sm-10">
                            <input class="form-control mt5">
                            </div>
                        </div>
                        <div>
                            <label for="inputPassword3" class="col-sm-2 control-label">详细地址</label>
                            <div class="col-sm-10">
                            <input  class="form-control mt5">
                            </div>
                        </div>
                    </form>
                    <!-- 地图 -->
                    <div id="allmap_two" style="height:200px;margin:0 auto;margin-top:8px;"></div>
                    <!-- 多选功能功能以及文字图片上传-->
                    <form class="checkBox" style="margin-top:6px">
                        <!-- 多选框 -->
                        <div class="checkForm">
                            <span>小区宣传标示</span>
                            &nbsp;&nbsp;
                            <input type="checkbox" name="vehicle" value="Bike" /><label for="">文字</label>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox" name="vehicle" value="Car"/><label for="">图片</label>
                        </div>
                        <!-- 文字上传 -->
                        <div class="fontBox">
                            <span>文字</span>
                            <textarea cols="60" rows="10"></textarea>
                        </div>
                        <!-- 图片上传 -->
                        <div class="fontBox" style="overflow:hidden;margin-top:12px">
                            <span class="fontBox_img" style="float:left">图片</span>
                            <button style="float:left;margin-left:8px;width:100px">预览</button>
                            <input class="fontBox_file" type="file" value="上传" style="float:left;margin-left:8px">
                        </div>
                        <!-- 展示图片 -->
                        <div style="width:100px;height:100px;border:1px solid black;margin-top:10px">预览图片</div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
                </div>
            </div>
    </div>

    <!-- 弹出框5 查看排期 -->
    <div class="modal fade bs-example-modal-lg" id="myModal_five" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog" role="document" style="width:800px">
            <div class="modal-content" style="width:800px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">查看排期</h4>
            </div>
            <div class="modal-body" style="width:800px">
                <!-- 日历 -->
                <div id="demo"></div>
                <div id="ca" style="margin:0 auto"></div>
                <!-- 表格 -->
                <div class="tableList" style="width:750px">
                    <div class="controlBtn">
                        <div class="oRight">
                            <span>当前列表总数88</span>
                        </div>
                    </div>
                    <!-- 表格 -->
                    <table class="table table-bordered">
                        <!-- 表头 -->
                        <thead>
                            <tr class="warning">
                                <th>排序</th>
                                <th>商品编号</th>
                                <th>广告名称</th>
                                <th>所属公司</th>
                                <th>品牌名称</th>
                                <th>播放时间</th>
                                <th>起始时间</th>
                                <th>状态</th>
                                <th>排序</th>
                            </tr>
                        </thead>
                        <!-- 表身 -->
                        <tbody>
                            <tr>
                                <td>12243</td>
                                <td>有意 u</td>
                                <td>有意*</td>
                                <td>有意**</td>
                                <td>有意</td>
                                <td>有意</td>
                                <td>******</td>
                                <td>******</td>
                                <td><a href="javascript:;">置顶</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            <!-- 分页-->
            <div value="1 0" style="width:0"></div>
            <div id="page" class="page_div"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>

    <!-- 弹出框6 设备详情 -->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal_six">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="width:900px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">设备详情</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">序号</label>
                        <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                        <label for="exampleInputEmail2">设备ID</label>
                        <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                        <label for="exampleInputEmail2">单元号</label>
                        <input type="text" class="form-control">
                    </div>
                </form>
                <div class="tableList">
                    <div class="controlBtn">
                        <div class="oLeft">
                            <button data-toggle="modal" data-target="#myModal_seven">添加设备</button>
                            <button data-toggle="modal" data-target="#myModal_ten">导出设备信息</button>
                        </div>
                        <div class="oRight">
                            <span>当前列表总数88</span>
                        </div>
                    </div>
                    <!-- 表格 -->
                    <table class="table table-bordered">
                        <!-- 表头 -->
                        <thead>
                            <tr class="warning">
                                <th>设备位置</th>
                                <th>备注</th>
                                <th>设备ID</th>
                                <th>添加时间</th>
                                <th>设备运营状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <!-- 表身 -->
                        <tbody>
                            <tr>
                                <td>12243</td>
                                <td>*****</td>
                                <td>******</td>
                                <td>******</td>
                                <td data-toggle="modal" data-target="#myModal_nine">
                                    <input type="checkbox" name="sex" id="male" class="chooseBtn" />
                                    <label for="male" class="choose-label"></label>
                                </td>
                                <td><a href="javascript:;"data-toggle="modal" data-target="#myModal_eight">修改</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 分页-->
                <div value="1 0" style="width:0"></div>
                <div id="page" class="page_div"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">重置</button>
                <button type="button" class="btn btn-primary">检索</button>
            </div>
            </div>
        </div>
    </div>


    <!-- 弹出框7 是否添加设备 -->
    <div class="modal fade" id="myModal_seven" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加设备</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">设备位置</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control">
                        </div>
                    </div>
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">备注</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control">
                        </div>
                    </div>
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">设备ID</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>

    <!-- 弹出框8 修改 -->
    <div class="modal fade" id="myModal_eight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">设备位置</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control">
                        </div>
                    </div>
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">备注</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control">
                        </div>
                    </div>
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">设备ID</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control">
                        </div>
                    </div>
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">所属小区</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>

    <!-- 弹出框9 是否改变状态 -->
    <div class="modal fade" id="myModal_nine" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">改变状态</h4>
            </div>
            <div class="modal-body">
                是否改变当前状态？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>

    <!-- 弹出框10 导出设备 -->
    <div class="modal fade" id="myModal_ten" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">改变状态</h4>
            </div>
            <div class="modal-body">
                <em>全部时间</em><input type="checkbox">
                <form class="form-horizontal">
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">时间</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control" type="date">
                        </div>
                    </div>
                    <div class="form-group w400">
                        <label for="inputEmail3" class="col-sm-2 control-label w100">至</label>
                        <div class="col-sm-10 w202">
                        <input class="form-control" type="date">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>


    <script src="./js/jquery-3.2.0.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/paging.js"></script>
    <script src="./js/pag.js"></script>
    <script src="./js/calendar.js"></script>

    <script>
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398,39.897445);
        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
        map.centerAndZoom(point,12);

        function myFun(result){
            var cityName = result.name;
            map.setCenter(cityName);
            // alert("当前定位城市:"+cityName);
        }
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);  


        // 百度地图API功能
        var map = new BMap.Map("allmap_two");
        var point = new BMap.Point(116.331398,39.897445);
        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
        map.centerAndZoom(point,12);

        function myFun(result){
            var cityName = result.name;
            map.setCenter(cityName);
            // alert("当前定位城市:"+cityName);
        }
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);  

        //日历
        $('#ca').calendar({
        data: [
            {
                date: '2018/06/14',
                value: 'Christmas Eve'
            },
            {
                date: '2018/06/15',
                value: 'Merry Christmas'
            },
            {
                date: '2018/06/12',
                value: 'Happy New Year'
            }
        ],
        onSelected: function (view, date, value) {
            if($(this).hasClass('selected')){
                $(this).removeClass('selected');
            }else{
                $(this).addClass('selected');
            }
            console.log(view);
            console.log(date);
            console.log(value);
        }
    });

    </script>
</body>
</html>